<template>
    <div class="login_container">
        <HeaderTop :goBack="true" :headTitle="'用户登陆'"></HeaderTop>
        <form class="logon_form" @click.prevent >
            <section class="input_container">
                <input v-model="accountValue" class="input_account" type="text" placeholder="手机号/账号">
            </section>
            <section class="input_container">
                <input v-model="pwdValue" type="password" placeholder="密码(字母和数字组合)" v-if="!showPwd">
                <input v-model="pwdValue" type="" placeholder="密码(字母和数字组合)" v-else >
                <section @click="changePassWordType" class="switch_pwd" :class="{change_to_text:showPwd}">
                    <div class="circle_button" :class="{trans_to_right: showPwd}"></div>
                    <span>abc</span>
                    <span>...</span>
                </section>
            </section>
            <section class="input_container">
                <input type="text" placeholder="验证码" v-model="codeNumber">
                <section class="randomimg_container">
                    <img class="change_img" v-show="captchaCodeImg" :src="captchaCodeImg" alt="图片">
                    <div class="change_text" @click="getCaptchaCode">
                        <span>看不清</span>
                        <span>换一张</span>
                    </div>
                </section>
            </section>
        </form>
        <p class="tips">温馨提示：未注册过的账号，登录时将自动注册</p>
        <p class="tips">注册过的用户可凭账号密码登录</p>
        <div class="login_btn" @click="submit">登录</div>
        <router-link to="/forget" class="reset_btn">忘记密码?</router-link>
        <AlertTips v-show="showTips" :alertText="showTipsText" @close="closeTips"></AlertTips>
    </div>
</template>

<script>
import HeaderTop from '../../components/header/HeaderTop'
import AlertTips from '../../components/common/AlertTips'
import {getcaptchas , accountLogin} from '../../api/getData' 
import {mapActions,mapState} from 'vuex'
export default {
    components:{
        HeaderTop,
        AlertTips
    },
    computed:{
        ...mapState(['user'])
    },
    data(){
        return {
            showPwd: false, //是否明文显示密码
            accountValue:'', // 账号
            pwdValue:'', // 密码
            captchaCodeImg:'', // 文字图片地址
            codeNumber:'', // 验证码
            showTips:false, // 
            showTipsText:"" //
        }
    },
    created(){
        this.getCaptchaCode();
    },
    methods:{
        ...mapActions(['setUserInfo']),
        async getCaptchaCode(){
            let res = await getcaptchas();
            this.captchaCodeImg=res.code;
        },
        changePassWordType(){
            this.showPwd = !this.showPwd
        },
        async submit(){
            // 正则 账号
            let account = this.accountValue;
            account = account.trim();
            if(!account || account.length<6){
                this.showTips=true;
                this.showTipsText="账号格式不正确"
                return;
            }
            // 正则 密码
            let pwd = this.pwdValue;
            pwd = pwd.trim();
            if(!pwd || pwd.length<6){
                this.showTips=true;
                this.showTipsText="密码格式不正确"
                return;
            }

            // 正则 验证码
            let vertity = this.codeNumber;
            vertity = vertity.trim();
            if(!vertity){
                this.showTips=true;
                this.showTipsText="验证码错误"
                return;
            }

            // 提交请求
            let userInfo = await accountLogin(account,pwd,vertity);
            //如果返回的值不正确，则弹出提示框，返回的值正确则返回上一页
            if (userInfo.status ===0) {// 错误提示
                this.showTips = true;
                this.showTipsText = userInfo.message;
            }else{
                this.setUserInfo(userInfo);
                if(this.$route.query.redirect){
                    this.$router.replace(this.$route.query.redirect)
                }else{
                    this.$router.go(-1);
                }
            }
        },
        closeTips(){
            this.showTips=false;
        }
    }
}
</script>

<style lang="scss" scoped>
@import '~@styl/mixin.scss';
.login_container{
    padding-top: 2.5rem;
}
.logon_form{
    background: #fff;
    @include fj(center);
    flex-direction: column;
    .input_container{
        height: 2.1rem;
        border-bottom: 0.025rem solid $bc;
        padding: 0.4rem 0.8rem 0.3rem;
        display: flex;
        align-items: center;
        input{
            @include sc(0.65rem,#333);
            flex: 1;
            &::placeholder{
                font-size: 0.65rem;
                color: #999;
            }
        }
        .switch_pwd{
            @include fj;
            font-size: 0.45rem;
            @include wh(2rem,0.7rem);
            padding: 0 0.2rem;
            border-radius: 0.5rem;
            border: 0.025rem solid #ccc;
            background: #ccc;
            position: relative;
            span{
                text-align: left;
                flex: 1;
                color: #999;
                &:nth-of-type(2){
                    text-align: right;
                }
            }
            &.change_to_text{
                background: $green;
                border: 0.025rem solid $green;
                span{
                    color: #FFF;
                }
            }
            .circle_button{
                position: absolute;
                top: -0.2rem;
                left: 0;
                @include wh(1rem,1rem);
                background: $bc;
                border-radius: 50%;
                transition: all 0.3s;
                &.trans_to_right{
                    transform: translateX(100%);
                }
            }
        }
        .randomimg_container{
            margin-left: 1rem;
            @include fj;
            .change_img{
                @include wh(3.5rem,1.5rem);
                margin-right: 0.5rem;
            }
            .change_text{
                display: flex;
                flex-direction: column;
                @include sc(0.55rem,#666);
                span{
                    &:nth-child(2){
                        color: $blue;
                    }
                }
            }
        }
    }
}
.tips{
    padding: 0.4rem 0.6rem;
    @include sc(0.5rem,#f00);
    &:nth-of-type(2){
        padding-top: 0.1rem;
    }
}
.login_btn{
    margin: 0 0.7rem 1rem;
    padding: 0.5rem 0;
    background: $green;
    border-radius: 0.15rem;
    color: $fc;
    font-size: 0.7rem;
    text-align: center;
}
.reset_btn{
    @include sc(0.6rem,$blue);
    float: right;
    margin-right: 0.7rem;
}
</style>